<template>
  <div
    style="height: 523px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
    <div style="padding: 14px;">
      <h4 style="text-align: left; margin-left: -3px;">当前等待审核的生产计划总数：{{this.tableData.length}}例</h4>
    </div>
    <div style="background-color: #E9EEF3; height: 450px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>
        <el-table :data="tableData" style="width: 100%;height: 400px;">
          <el-table-column prop="newpro_id" label="生产计划单编号" width="172">
          </el-table-column>

          <el-table-column prop="registrant" label="登记人" width="130">
          </el-table-column>
          <el-table-column prop="supPlytime" label="供货时间" width="270">
          </el-table-column>
          <el-table-column prop="regtime" label="登记时间" width="170">
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="140">
          </el-table-column>
          <el-table-column label="审核" show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- @click="check(scope.row.newpro_id)" -->
              <el-button type="primary" size="mini" @click="shOpen(scope.row)" round="">审核</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>

      <div class="block" style="margin-top: 15px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[1,2,7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

    <el-drawer title="审核生产计划单" size="100%" :visible.sync="drawer" direction="ttb" :before-close="handleClose">
      <div class="div_01">
        <el-row style="background-color: whitesmoke;padding: 14px;">
          <el-col :span="6" style="text-align: left; font-size: 14px;">
            计划单编号： {{this.newPlan.newpro_id}}
          </el-col>
        </el-row>

        <el-table border :data="tableData2" style="width: 100%;margin-top: 0px;overflow: scroll;height: 200px;"
          size="mini">

          <el-table-column prop="proSige_id" label="产品编号" width="160">
          </el-table-column>
          <el-table-column prop="pName" label="产品名称" width="140">
          </el-table-column>
          <el-table-column prop="sumPrice" label="生产单价" width="140">
          </el-table-column>
          <!--
          <el-table-column prop="price" label="设计单价" width="130">
          </el-table-column> -->
          <el-table-column prop="num" label="数量" width="140">
          </el-table-column>
          <el-table-column label="出库单集合" width="246">
          </el-table-column>

        </el-table>
        <el-form :model="newPlan">

          <!--  newpro_id: 0, // 新生计划ID
          supPlytime: '', // 供货时间
          registrant: '', // 登记人
          regtime: '', // 登记时间
          remark: '', // 备注
          check: '' // 审核-->
          <el-row style="background-color: whitesmoke;padding: 14px;">
            <el-col :span="16" style="text-align: left; font-size: 14px;margin-top: 6px">
              登记人：
              <input v-model="newPlan.registrant" class="input_01" />
            </el-col>
            <el-col :span="8" style="text-align: right; font-size: 14px;margin-top: 6px">
              登记时间：{{newPlan.regtime}}
            </el-col>
            <el-col :span="10" style="text-align: left; font-size: 14px; margin-top: 10px;margin-left: 1px;">
              审核人：&nbsp;&nbsp;&nbsp;
              <input v-model="newPlan.auditor" class="input_01" />
            </el-col>
            <el-col :span="13" style="text-align: right; font-size: 14px;margin-top: 10px;margin-left: 33px;">
              审核时间：{{this.newPlan.auditorTime}}
            </el-col>
            <el-col :span="24" style="text-align: left; font-size: 14px;margin-top: 10px;">
              备注:
            </el-col>
            <el-col :span="24" style="text-align: left; font-size: 14px;margin-top: 10px;">
              <textarea v-model="this.newPlan.remark" style="margin: 0px; width: 816px; height: 74px;"></textarea>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="margin-top: 14px; text-align: right; margin-right: 214px;">
        <span slot="footer">
          <el-button style="width: 45px ; height: 35px;" @click="drawer = false">关闭</el-button>
          <el-button style="width:  80px ; height: 35px;" type="danger" @click="noThenoNelPlansh()">否决审核</el-button>
          <el-button style="width:  80px ; height: 35px;" type="primary" @click="determineTheAudit()">确定审核</el-button>
        </span>
      </div>
    </el-drawer>



  </div>
</template>

<script>
  export default {
    data() {
      return {
        drawer: false,
        pageNum: 1,
        pageSize: 7,
        total: 0,
        tableData: [],
        tableData2: [],
        formLabelWidth: '120px',
        form: {
          region: ''
        },
        newPlan: {
          newpro_id: 0, // 新生计划ID
          supPlytime: '', // 供货时间
          registrant: '', // 登记人
          regtime: '', // 登记时间
          remark: '', // 备注
          check: '', // 审核
          auditor: '', //审核人
          auditorTime: '' //审核时间
        }
      }
    },
    methods: {
      noThenoNelPlansh() {
        this.$confirm('确定否决审核该新发生生产单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'primary'
        }).then(() => {
          this.$http.post('production/product/noNelPlansh?newpro_id=' + this.newPlan.newpro_id).then(res => {
            if (res.status == 200) {
              this.$message({
                type: 'success',
                message: '否决审核成功!'
              });
            }
            this.drawer = false;
            this.GetOnline(this.pageNum, this.pageSize);
          }).catch(err => {
            console.log(err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审核'
          });
        });
      },
      determineTheAudit() {
        this.$confirm('确定审核该新发生生产单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'primary'
        }).then(() => {
          var data= this.newPlan;
          this.$http.post('production/product/okNelPlansh',this.$qs.stringify(data)).then(res => {
            if (res.status == 200) {
              this.$message({
                type: 'success',
                message: '审核成功!'
              });
            }
            this.drawer = false;
            this.GetOnline(this.pageNum, this.pageSize);
          }).catch(err => {
            console.log(err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审核'
          });
        });
      },
      shOpen(data) {
        this.newPlan.newpro_id = data.newpro_id;
        this.newPlan.registrant = data.registrant;
        this.newPlan.regtime = data.regtime;
        this.newPlan.auditor = 'ademin';
        this.newPlan.auditorTime = this.getNewDate();
        this.newPlan.remark = data.remark;
        this.$http.post('production/product/selNewPlanDetailsh?newpro_id=' + data.newpro_id, ).then(res => {
          if (res.data.length != 0) {
            this.tableData2 = res.data;
          }
        }).catch(err => {
          console.log(err);
        })
        this.drawer = true;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      GetOnline(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post('production/product/newPlanSh', data).then(res => {
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.total = res.data.total;
          this.tableData = res.data.rows;
        }).catch(err => {
          console.log(err);
        })
      },
      check(data) {

      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getNewDate() {
        var date = new Date();
        console.log(date);
        var transverse = "-";
        var Verticalpoint = ":";
        var month = date.getMonth() + 1; //获取月份
        var strDate = date.getDate(); //获取具体的日期
        var strHour = date.getHours(); //获取...钟点
        var strMinute = date.getMinutes(); //获取分钟数
        var strSeconde = date.getSeconds(); //获取秒钟数
        //判断获取月份 、 具体的日期 、...钟点、分钟数、秒钟数 是否在1~9
        //如果是则在前面加“0”
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        console.log(month);
        if (strDate >= 1 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (strHour >= 1 && strHour <= 9) {
          strHour = "0" + strHour
        }
        console.log(strHour);
        if (strMinute >= 1 && strMinute <= 9) {
          strMinute = "0" + strMinute;
        }

        if (strSeconde >= 1 && strSeconde <= 9) {
          strSeconde = "0" + strSeconde;
        }
        //时间日期字符串拼接
        var NewDate = date.getFullYear() + transverse + month + transverse + strDate + " " +
          strHour + Verticalpoint + strMinute + Verticalpoint + strSeconde;
        //返回拼接字符串
        return NewDate;
      }
    },
    mounted() {
      this.GetOnline(this.pageNum, this.pageSize);
    }
  }
</script>

<style scoped="scoped">
  .el-input--mini .el-input__inner {
    height: 20px;
    line-height: 28px;
  }

  * {
    padding: 0px;
    margin: 0px;
  }

  .boder_one {
    border-top: none;
    border-left: none;
    border-right: none;
    width: 105px;
  }


  th {
    background-color: blue;
  }

  .el-table tr {
    background-color: royalblue;
  }

  .el-breadcrumb__inner {
    color: black;

  }

  .el-input__inner {

    height: 25px;

  }

  .el-input__prefix,
  .el-input__suffix {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    height: 100%;
    color: #C0C4CC;
    text-align: center;
  }

  .input_01 {
    background-color: whitesmoke;
    border-top: none;
    border-right: none;
    border-left: none;
  }

  .div_01 {
    width: 850px;
    height: 457px;
    border-top: 2px solid #909399;
    /* #333333 */
    border-left: 2px solid #909399;
    border-right: 4px solid #909399;
    border-bottom: 4px solid #909399;
    margin: 0px auto;
  }
</style>
